import BaseVue from '@/lib/base/BaseVue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Component
export default class extends BaseVue {
    @Prop()
    private scrollX!: boolean;
    @Prop({
        default: true
    })
    private scrollY!: boolean;

    private get style() {
        return {
            overflowX: this.scrollX ? 'auto' : 'hidden',
            overflowY: this.scrollY ? 'auto' : 'hidden',
            webkitOverflowScrolling: 'touch'
        }
    }

    public render() {
        return (
            <div ref="app" style={this.style}>
                {this.$slots.default}
            </div>
        )
    }

    public created() {
        this.$nextTick(() => {
            this.init();
        });
    }

    private init() {
        const app = this.$refs.app as HTMLElement;
        app.addEventListener('scroll', () => {
            const scrollHeight = app.scrollHeight;
            const scrollTop = app.scrollTop;
            const scrollLeft = app.scrollLeft
            this.$emit('scroll', { scrollHeight, scrollTop, scrollLeft });
        }, false);
    }
}
